<template>
  <div class="event-news-detail">
    <h3 class="info_title h3">{{ event.eventTitle }}</h3>
    <h4 class="info_time h4">发布时间：{{ event.modifyTime | formatDate }} </h4>
    <div class="info_txt" v-html="event.eventContent">
    </div>
    <div class="PrevNextBox">
      <h1 class="h1">
        <router-link to="/eventAndNews">
          <a>[ 返回列表 ]</a>
        </router-link>
      </h1>
      <dl style="cursor:pointer;" @click="toOtherEvent(event.prev.eventId)" v-if="event.prev !== null">
        <a>上一篇：{{ event.prev.eventTitle }}</a>
      </dl>
      <dl style="cursor:pointer;" @click="toOtherEvent(event.next.eventId)" v-if="event.next !== null">
        <a>下一篇：{{ event.next.eventTitle }}</a>
      </dl>
    </div>
  </div>
</template>

<script>
import { getEventById } from '../../api'
import { formatTimeToStr } from '@/utils/data'
export default {
  name: 'EventAndNewsDetail',
  props: ['id'],
  data () {
    return {
      event: {
        eventContent: '',
        eventId: 1,
        eventPic: '',
        eventTitle: '',
        eventType: 1,
        modifyTime: '',
        productId: 65,
        prev: {},
        next: {}
      }
    }
  },
  filters: {
    formatDate: function (time) {
      if (time != null && time !== '') {
        const date = new Date(time)
        return formatTimeToStr(date, 'yyyy-MM-dd hh:mm:ss')
      } else {
        return ''
      }
    }
  },
  created () {
    this.getEvent(this.id)
  },
  methods: {
    getEvent (id) {
      getEventById(id).then(({ data }) => {
        if (data.code === 0) {
          this.event = data.event
        } else {
          this.$router.go(-1)
          this.$message.error(data.msg)
        }
      }).catch(res => {
        console.log(res)
      })
    },
    // 上一篇或者下一篇
    toOtherEvent (id) {
      this.getEvent(id)
    }
  }
}
</script>

<style scoped lang="less">
.event-news-detail {
  width: 980px;
  margin: 0 auto;

  .info_title {
    padding: 10px 0px;
    font-size: 14px;
    text-align: center;
    margin: 0;
    line-height: 23px;
    color: #5A5A5A;
    font-family: Arial, "宋体";
  }

  .info_time {
    font-size: 12px;
    text-align: center;
    color: #26355B;
    font-weight: normal;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 15px;
    margin: 0;
    font-family: Arial, "宋体";
  }

  .info_txt {
    font-size: 12px;
    line-height: 23px;
    color: #5A5A5A;
    font-family: Arial, "宋体";
  }

  .PrevNextBox {
    text-align: left;

    a {
      text-decoration: none;
      color: #5A5A5A;
      font-size: 12px;
      font-family: Arial, "宋体";
      font-weight: normal;

      &:hover {
        color: #ccc;
      }
    }

    .h1 {
      a:hover {
        color: #B40001;
      }
    }

  }
}
</style>
